<template>
    <div class="app-container">

        <!-- 查询和其他操作  -->
        <div class="filter-container">
          <el-select v-model="listQuery.username" :placeholder="$t('请输入会员账号')" clearable style="width: 200px;" filterable >
            <el-option v-for="item in userOptions" :key="item.id" :label="item.username" :value="item.username">
            </el-option>
          </el-select>
          <el-select v-model="listQuery.nickname" :placeholder="$t('请输入会员名称')" clearable style="width: 200px;" filterable >
            <el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.nickname">
            </el-option>
          </el-select>
          <el-input v-model="listQuery.cardNo" clearable  style="width: 200px;"
                    :placeholder="$t('请输入卡号')" />
            <el-select v-model="listQuery.rechargeType" clearable :placeholder="$t('请选择充值类型')">
                <el-option v-for="item in rechargeType" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <el-select v-model="listQuery.payType" clearable :placeholder="$t('请选择充值方式')">
                <el-option v-for="item in payType" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <el-select v-model="listQuery.rechargeSource" clearable :placeholder="$t('请选择充值来源')">
                <el-option v-for="item in rechargeSource" :value="item.value" :label="item.label"></el-option>
            </el-select>
          <el-date-picker
            style="vertical-align: top; width:385px;"
            v-model="listQuery.dateRange"
            type="daterange"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="——"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')">
          </el-date-picker>

            <el-button type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
        </div>


        <p></p>
        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit
            highlight-current-row>
            <el-table-column type="index" :index="getIndex" :label="$t('序号')" width="50"></el-table-column>
            <el-table-column align="center" :label="$t('会员账号')" prop="username" />
          <el-table-column align="center" :label="$t('会员昵称')" prop="nickname" />
            <el-table-column align="center" :label="$t('礼物卡号')" prop="receiveCash">
                <template slot-scope="scope">
                    {{ scope.row.cardNo || '--' }}
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('充值类型')" prop="receiveCash">
                <template slot-scope="scope">
                    {{ rechargeTypeMap[scope.row.rechargeType] }}
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('充值方式')" prop="receiveCash">
                <template slot-scope="scope">
                    {{ payTypeMap[scope.row.payType] }}
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('充值金额')" prop="receiveCash">
                <template slot-scope="scope">
                    $ {{ scope.row.rechargeAmount }}
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('充值来源')" prop="receiveCash">
                <template slot-scope="scope">
                    {{ rechargeSourceMap[scope.row.rechargeSource] }}
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('充值时间')" prop="addTime" />
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
    import { rechargeShopList } from '@/api/order'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission'
    import {userOption} from "@/api/user"; // 权限判断函数

    export default {
        name: 'orderRefund',
        components: { Pagination },
        data() {
            const rechargeSourceMap= {
                1: this.$t('APP充值'),
                2: this.$t('线下POS充值')
            }
            const rechargeTypeMap= {
                1: this.$t('礼物卡'),
                3: this.$t('余额')
            }
            const payTypeMap= {
                1: this.$t('现金支付'),
                2: this.$t('礼物卡支付'),
                3: this.$t('Paypal支付'),
                4: this.$t('余额支付'),
                5: this.$t('Clover支付'),
                6: this.$t('积分兑换')
            }
            return {
                rechargeSourceMap,
                rechargeTypeMap,
                payTypeMap,
                list: [],
                total: 0,
                listLoading: true,
                rechargeSource: [
                    { value: 1, label: "APP充值" },
                    { value: 2, label: "POS充值" },
                ],
                rechargeType: [
                    { value: 1, label: "礼物卡" },
                    { value: 3, label: "余额" },
                ],
                payType: [
                    { value: 1, label: "现金支付" },
                    { value: 2, label: "礼物卡支付" },
                    { value: 3, label: "Paypal支付" },
                    { value: 4, label: "余额支付" },
                    { value: 5, label: "Clover支付" },
                    { value: 6, label: "积分兑换" },
                ],
              userOptions: [],
                listQuery: {
                    page: 1,
                    limit: 20,
                    sort: 'add_time',
                    order: 'desc',

                    typeId: undefined,
                    payTypeId: undefined,
                    fromId: undefined,
                    shopId: undefined,
                    timeHorizon:undefined,
                    userId:undefined,
                },
                pickerOptions: {
                    shortcuts: [{
                        text: this.$t('Yesterday'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: this.$t('Last_7_days'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: this.$t('Last_month'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    }]
                },
            }
        },
        created() {
            const id = this.$route.query.id
            this.listQuery.shopId = id
            this.getList()
          this.getUserList()
        },
        methods: {
            checkPermission,
          getUserList() {
            userOption()
              .then(response => {
                this.userOptions = response.data.data
              })
              .catch(() => {
                this.userOptions = []
              })
          },
            getList() {
                this.listLoading = true
                // 详情
                rechargeShopList(this.listQuery).then(response => {
                    this.list = response.data.data.list
                    this.total = response.data.data.total
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            payTypeFilter(type) {
                return this.payTypeMap[type]
            },
            handleDetail(row) {
                this.$router.push({ path: '/order/refund_details', query: { id: row.id } })
            },
            getFullDate(targetDate) {
                var D, y, m, d;
                if (targetDate) {
                    D = new Date(targetDate);
                    y = D.getFullYear();
                    m = D.getMonth() + 1;
                    d = D.getDate();
                } else {
                    y = fullYear;
                    m = month;
                    d = date;
                }
                m = m > 9 ? m : '0' + m;
                d = d > 9 ? d : '0' + d;
                return y + '-' + m + '-' + d;
            },
            getIndex(index) {
                return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
            }
        }
    }
</script>

<style scoped>
    .detail-container {
        width: 80%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }

    .operate-container {
        background: #F2F6FC;
        height: 80px;
        margin: -20px -20px 0;
        line-height: 80px;
    }

    .operate-button-container {
        float: right;
        margin-right: 20px
    }

    .table-layout {
        margin-top: 20px;
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
    }

    .table-cell {
        height: 60px;
        line-height: 40px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
    }

    .table-cell-title {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;
    }
</style>
